<template>
    <div>
        <a-modal
        :dialog-style="{ top: '20px' }"
         v-model:visible="visible" 
         :title="formState.id?(formState.view?'查看':'编辑'):'新增'" 
         @ok="handleOk" 
         @cancel="visible = false"
         class="enterprise-add-edit-modal-10"
         :width="1000"
         :footer="null"
        >
            <div v-if="visible">
                <a-form :form="form" layout="horizontal" class="add-edit-form">
                    <a-form-item label="出厂编号">
                        <a-input
                        v-model:value="formState.fccbh"
                        placeholder="请输入出厂编号"
                        v-decorator="[
                            'fccbh', { initialValue:formState.fccbh, rules: rules.fccbh}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="设备名称">
                        <a-input
                        v-model:value="formState.fsbmc"
                        placeholder="请输入设备名称"
                        v-decorator="[
                            'fsbmc', { initialValue:formState.fsbmc, rules: rules.fsbmc}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="设备精度">
                        <a-input 
                            placeholder="请输入设备精度"
                            v-model:value="formState.fsbjd"
                            v-decorator="[
                            'fsbjd', { initialValue:formState.fsbjd, rules: rules.fsbjd}
                            ]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item label="设备类型">
                        <a-select
                            ref="select"
                            placeholder="请选择设备类型"
                            v-model:value="formState.fsblx"
                            v-decorator="[
                                'fsblx', { initialValue:formState.fsblx, rules: rules.fsblx}
                            ]"
                            >
                            <a-select-option value="生产设备">生产设备</a-select-option>
                            <a-select-option value="检验设备">检验设备</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="设备型号">
                        <a-input 
                            placeholder="请输入设备型号"
                            v-model:value="formState.fsbxh"
                            v-decorator="[
                            'fsbxh', { initialValue:formState.fsbxh, rules: rules.fsbxh}
                            ]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item label="设备数量">
                        <a-input-number
                        style="width: 185px;"
                        :min="0"
                        :precision="0"
                        v-model:value="formState.fsbsl"
                        placeholder="请输入设备数量"
                        v-decorator="[
                            'fsbsl', { initialValue:formState.fsbsl, rules: rules.fsbsl}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="设备用途" class="flex-1-box">
                        <a-textarea 
                            placeholder="请输入设备用途"
                            v-model:value="formState.fsbyt"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                            v-decorator="[
                            'fsbyt', { initialValue:formState.fsbyt, rules: rules.fsbyt}
                            ]"
                        ></a-textarea>
                    </a-form-item>
                    <a-form-item label="原产地" class="flex-1-box">
                        <a-input 
                            placeholder="请输入原产地"
                            v-model:value="formState.fycd"
                            v-decorator="[
                            'fycd', { initialValue:formState.fycd, rules: rules.fycd}
                            ]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item label="单价">
                        <a-input-number
                        style="width: 185px;"
                        :min="0"
                        :precision="4"
                        v-model:value="formState.fdj"
                        placeholder="请输入单价"
                        v-decorator="[
                            'fdj', { initialValue:formState.fdj, rules: rules.fdj}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="设备生产日期">
                        <a-date-picker 
                            style="width: 100%;"
                            v-model:value="formState.fsbscrq" 
                            placeholder="请选择设备生产日期"
                            v-decorator="[
                            'fsbscrq', { initialValue:formState.fsbscrq, rules: rules.fsbscrq}
                            ]"
                        />
                    </a-form-item>
                    <a-form-item label="购置日期">
                        <a-date-picker 
                            style="width: 100%;"
                            v-model:value="formState.fgzrq" 
                            placeholder="请选择购置日期"
                            v-decorator="[
                            'fgzrq', { initialValue:formState.fgzrq, rules: rules.fgzrq}
                            ]"
                        />
                    </a-form-item>
                    <a-form-item label="使用年限">
                        <a-input 
                            placeholder="请输入使用年限"
                            v-model:value="formState.fsynx"
                            v-decorator="[
                            'fsynx', { initialValue:formState.fsynx, rules: rules.fsynx}
                            ]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item label="设备状态">
                        <a-select
                            ref="select"
                            placeholder="请选择设备状态"
                            v-model:value="formState.fsbzt"
                            v-decorator="[
                                'fsbzt', { initialValue:formState.fsbzt, rules: rules.fsbzt}
                            ]"
                            >
                            <a-select-option value="正常">正常</a-select-option>
                            <a-select-option value="损坏">损坏</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="检测范围" class="flex-1-box">
                        <a-textarea 
                            placeholder="请输入检测范围"
                            v-model:value="formState.fjcfw"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                            v-decorator="[
                            'fjcfw', { initialValue:formState.fjcfw, rules: rules.fjcfw}
                            ]"
                        ></a-textarea>
                    </a-form-item>
                </a-form>
            </div>
            <div style="
                display: flex; justify-content: flex-end;
                margin-top: 20px; width: 100%;
                background-color: #fff;">
                <a-button @click="visible = false">取消</a-button>
                <a-button v-if="!formState.view" style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)">保存</a-button>
                <a-button v-if="!formState.view" class="blue-btn" type="primary" @click="handleOk(false)">保存并关闭</a-button>
            </div>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import moment from 'moment'
export default {
    components:{
        compSelector,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fccbh: [{
                    required: true,
                    message: '请输入出厂编号',
                    trigger: 'blur',
                }],
                // fsbmc: [{
                //     required: true,
                //     message: '请输入设备名称',
                //     trigger: 'blur',
                // }],
                // fsbjd: [{
                //     required: true,
                //     message: '请输入设备精度',
                //     trigger: 'blur',
                // }],
                // fsblx: [{
                //     required: true,
                //     message: '请选择设备类型',
                //     trigger: 'blur',
                // }],
                // fsbxh: [{
                //     required: true,
                //     message: '请输入设备型号',
                //     trigger: 'blur',
                // }],
                // fsbsl: [{
                //     type:'number',
                //     required: true,
                //     message: '请输入设备数量',
                //     trigger: 'blur',
                // }],
                // fsbyt: [{
                //     required: true,
                //     message: '请输入设备用途',
                //     trigger: 'blur',
                // }],
                // fycd: [{
                //     required: true,
                //     message: '请输入原产地',
                //     trigger: 'blur',
                // }],
                // fdj: [{
                //     type:'number',
                //     required: true,
                //     message: '请输入单价',
                //     trigger: 'blur',
                // }],
                // fsbscrq: [{
                //     type:'object',
                //     required: true,
                //     message: '请选择设备生产日期',
                //     trigger: 'blur',
                // }],
                // fgzrq: [{
                //     type:'object',
                //     required: true,
                //     message: '请选择购置日期',
                //     trigger: 'blur',
                // }],
                // fsynx: [{
                //     required: true,
                //     message: '请输入使用年限',
                //     trigger: 'blur',
                // }],
                // fjcfw: [{
                //     required: true,
                //     message: '请输入检测范围',
                //     trigger: 'blur',
                // }],
                // fsbzt: [{
                //     required: true,
                //     message: '请选择设备状态',
                //     trigger: 'blur',
                // }],

            },
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val){
            this.formState = {}
            this.formState = {...val,fsbscrq:val.fsbscrq?moment(val.fsbscrq,'YYYY-MM-DD'):'',fgzrq:val.fgzrq?moment(val.fgzrq,'YYYY-MM-DD'):''}
        },
        handleOk(val){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.formState.id){
                        this.$emit('editItem',{
                            ...this.formState,
                            ...values,
                            fsbscrq:this.formState.fsbscrq?moment(this.formState.fsbscrq).format('YYYY-MM-DD'):'',
                            fgzrq:this.formState.fgzrq?moment(this.formState.fgzrq).format('YYYY-MM-DD'):'',
                        },val)
                    }else{
                        this.$emit('addItem',{
                            ...this.formState,
                            ...values,
                            fsbscrq:this.formState.fsbscrq?moment(this.formState.fsbscrq).format('YYYY-MM-DD'):'',
                            fgzrq:this.formState.fgzrq?moment(this.formState.fgzrq).format('YYYY-MM-DD'):'',
                        },val)
                    }
                    
                }
            })
        },
    }
}
</script>
<style lang="less">
.enterprise-add-edit-modal-10{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
        }
        .ant-form-item-label{
            width: 110px;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .flex-05-box{
            width: 50%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
}
</style>